<template>
    <div class="footerPlayer" v-show="store.state.footerMusicShow">
        <van-sticky position="bottom">
            <div class="content">
                <div class="footerLeft" @click="showSongDetail()">
                    <img :src="store.getters.playingDetail.al.picUrl" alt="">
                    <span class="title">
                        {{ store.getters.playingDetail.name }}-
                        <span v-for="au in store.getters.playingDetail.ar">
                            {{ au.name }}</span>
                    </span>
                </div>
                <div class="footerRight">
                    <van-icon name="play" v-if="!store.state.isPlaying" size="0.5rem" @click="playMusic()" />
                    <van-icon name="pause-circle-o" v-else size="0.5rem" @click="playMusic()" />
                    <van-icon name="bars" size="0.5rem" @click="showPlayList" />
                </div>
            </div>
            <audio ref="audio" @timeupdate="updateTime" @durationchange="getDuration" @error="audioError"
                :src="`https://music.163.com/song/media/outer/url?id=${store.getters.playingDetail.id}`"></audio>
        </van-sticky>
    </div>
    <SongDetailPopup :playMusic="playMusic" />
    <PlayListPopup />
    <van-notify id="van-notify" />
</template>

<script lang='ts' setup>
import store from '@/store';
import { onMounted, ref, watch } from 'vue'
import SongDetailPopup from '@/components/SongDetailPopup/index.vue'
import PlayListPopup from '@/components/PlayListPopup/index.vue'
import { getMusicDetail } from '@/request/api/musicListDetail'
import { showNotify } from 'vant';
let audio = ref()
const musicId = window.sessionStorage.getItem('musicId') || ''
onMounted(async () => {
    /* 刷新页面后使用sessionStorage保存的歌曲 */
    if (!store.state.playList[0].id && musicId) {
        let res = await getMusicDetail(+musicId)
        if (res.data.code === 200) { store.commit('updatePlayList', res.data.songs) }
        else {
            showNotify({ type: 'danger', message: '获取歌曲失败' });
        }
    }
})
const playMusic = () => {
    /* 若不能播放 */
    if (audio.value.error !== null) {
        showNotify({ type: 'danger', message: '歌曲暂无版权' });
        store.commit('updateIsPlaying', false)
        return
    }
    if (audio.value.paused) {
        audio?.value?.play()
        store.commit('updateIsPlaying', true)
    } else {
        audio?.value?.pause()
        store.commit('updateIsPlaying', false)
    }
}
const showSongDetail = () => {
    store.commit('updateSongDetailShow', true)

}
const showPlayList = () => {
    store.commit('updatePlayListShow', true)
}
// 节流函数
const timer = (callback: any, time: number) => {
    let clock: any = null;
    return function () {
        if (!clock) {
            clock = setTimeout(() => {
                callback();
                clock = null;
            }, time);
        }
    };
}

const updateTime = () => {
    timer(store.commit('updateCurrentTime', audio?.value.currentTime), 1000)
}
const getDuration = () => {
    store.commit('updateDuration', audio.value.duration)
}
const audioError = () => {
    if (!store.state.playList[0].id) {
        return
    } else {
        showNotify({ type: 'danger', message: '歌曲暂无版权' });
        store.commit('updateIsPlaying', false)
    }
}
watch(() => store.state.playListIndex, val => {
    audio.value.autoplay = true
    store.commit('updateIsPlaying', true)
})
watch(() => store.state.playList, val => {
    audio.value.autoplay = true
    store.commit('updateIsPlaying', true)
})
watch(() => store.getters.playingDetail, async val => {
    let res = await store.dispatch('getMusicLyric', window.sessionStorage.getItem('musicId'))
    if (res.data.code === 200)
        store.commit('updateMusicLyric', res.data.lrc.lyric)
})
watch(() => audio?.value?.paused, () => {
    if (!audio.value.paused)
        store.commit('updateIsPlaying', true)
})
</script>
 
<style lang = "less" scoped>
.footerPlayer {
    width: 100%;
    height: 1.2rem;
    border-top: 1px solid #c0c0c0;
    position: sticky;
    bottom: 0;

    .content {
        height: 1.2rem;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding: 0 0.2rem;

        .footerLeft {
            width: 70%;
            display: flex;
            align-items: center;

            .title {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            img {
                width: 0.8rem;
                height: 0.8rem;
                border-radius: 50%;
                margin-right: 0.2rem;
            }
        }

        .footerRight {
            width: 20%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

}
</style>